export default function Stake() {
  return (
    <section id="stake" className="bg-gradient-to-b from-purple-950 to-black py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">Stake</h2>
          <p className="mt-6 text-lg leading-8 text-gray-300">
            Participate in our staking program to earn rewards and contribute to network security.
          </p>
        </div>

        <div className="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
          {[
            {
              title: "Flexible Staking",
              apy: "8%",
              period: "No lock-up",
              description: "Stake your tokens with the flexibility to withdraw at any time.",
            },
            {
              title: "Standard Staking",
              apy: "12%",
              period: "30 days lock-up",
              description: "Medium-term staking with higher rewards for a 30-day commitment.",
              featured: true,
            },
            {
              title: "Premium Staking",
              apy: "18%",
              period: "90 days lock-up",
              description: "Maximum rewards for long-term stakers with a 90-day lock-up period.",
            },
          ].map((plan, index) => (
            <div
              key={index}
              className={`rounded-2xl p-8 ${
                plan.featured
                  ? "bg-gradient-to-b from-purple-900 to-pink-900 ring-2 ring-purple-400"
                  : "bg-gray-900/50 ring-1 ring-gray-800"
              }`}
            >
              <h3 className="text-xl font-semibold text-white">{plan.title}</h3>
              <p className="mt-6 flex items-baseline gap-x-1">
                <span className="text-4xl font-bold tracking-tight text-white">{plan.apy}</span>
                <span className="text-sm font-semibold text-gray-300">APY</span>
              </p>
              <p className="mt-2 text-base text-gray-300">{plan.period}</p>
              <p className="mt-4 text-sm text-gray-300">{plan.description}</p>
              <button
                className={`mt-8 block w-full rounded-full px-4 py-2.5 text-center text-sm font-semibold shadow-sm ${
                  plan.featured
                    ? "bg-white text-purple-900 hover:bg-gray-200"
                    : "bg-purple-800 text-white hover:bg-purple-700"
                }`}
              >
                Start Staking
              </button>
            </div>
          ))}
        </div>

        <div className="mt-16 rounded-2xl bg-gray-900/50 p-8 ring-1 ring-gray-800">
          <h3 className="text-xl font-semibold text-white text-center">Total Value Locked</h3>
          <p className="mt-4 text-4xl font-bold text-white text-center">1,245,678 BERA</p>
          <div className="mt-8 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
            {[
              { label: "Active Stakers", value: "12,345" },
              { label: "Average APY", value: "14.2%" },
              { label: "Rewards Distributed", value: "458,972 BERA" },
              { label: "Protocol Security", value: "Very High" },
            ].map((stat, index) => (
              <div key={index} className="text-center">
                <p className="text-sm text-gray-400">{stat.label}</p>
                <p className="mt-2 text-xl font-semibold text-white">{stat.value}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}
